<template>
  <div class="div-background-rolling">
    <div class="infinite-list" @scroll="scrollDistance" ref="myScrollbar" id="box">
      <div v-for="(it, imgindex) in State.ProductActivationListArr" class="infinite-itemitem" :key="imgindex"
        :id="it.number">
        <div class="shortName" style="float:left">
          <a-tooltip placement="bottom" overlayClassName="bgc_tooltip">
            <template #title>
              <span>{{ it.shortName }}</span>
            </template>
            <p class="txt" :class="selectProduct === it.number ? 'isChoice' : 'unChoice'">{{ it.shortName }}</p>
          </a-tooltip>
        </div>
        <div class="rolling-panel" :class="selectProduct === it.number ? 'rolling-panel-bordel' : ''"
          @click="SelectProducItem(imgindex)">
          <!-- <img v-bind:src="imgCont(it.number)" class="img-background-imgs" v-if="it.id"> -->

          <!-- <div class="rolling-panel-img">
            <img v-bind:src="'/img/productLib/' + it.number + '.png' || '/img/productLib/404.png'"
              class="img-background-imgs" v-if="it.id">
          </div> -->
          <!-- 选中 -->
          <div class="rolling-panel-span" v-if="selectProduct === it.number">
            <!-- <p :class="selectindex === imgindex ? 'rolling-panel-bordel-1' : ''" style="height: 65px;">{{ it.shortName }}
            </p> -->
            <p :class="selectProduct === it.number ? 'rolling-panel-bordel-1' : ''">
              {{ it.vehicleModel }}<span class="shuText">|</span><span>No.</span>{{ it.number.slice(-3) }}
            </p>
            <p @click="ProductOpen(imgindex)" v-if="it.Status === 0" style="z-index: 10;">运行</p>
            <p @click="ProductActiveDialogShow(imgindex)" v-if="it.Status === 1" style="z-index: 10;">激活</p>
            <p v-if="it.State === 2">待联网</p>
            <div class="rolling-panel-img">
              <img v-bind:src="'/img/productLib/' + it.number + '.png' || '/img/productLib/404.png'"
                class="select-img-background-imgs" v-if="it.id">
            </div>
          </div>
          <!-- 不选中 -->
          <div v-else class="rolling-panel-span-1">
            <!-- <p :class="selectindex === imgindex ? 'rolling-panel-bordel-1' : ''" style="height: 65px;">{{ it.shortName }}
            </p> -->
            <!-- <p :class="selectindex === imgindex ? 'rolling-panel-bordel-1' : ''">{{ it.vehicleModel }}</p> -->
            <div class="rolling-panel-img">
              <img v-bind:src="'/img/productLib/' + it.number + '.png' || '/img/productLib/404.png'"
                class="unselect-img-background-imgs" v-if="it.id">
            </div>
          </div>
          <div class="item-tip-show" @click="ProducOptionShow($event, imgindex)">
            <img src="../assets/img/other/icon-menu.png">
          </div>
          <div class="item-tipshow" v-if="State.tipShowBoolean[imgindex] === true && selectProduct === it.number">
            <div class="item-top" @click="ProductTop(imgindex)"><span>置顶</span></div>
            <div class="item-delete" @click="ProductDelete(imgindex)"><span>删除</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 删除任务对话框 -->
  <DialogComponents :DialogComponent="DeleteDialogComponent" @click="ProductDeleteFn"></DialogComponents>
  <!-- 产品启动提示对话框 -->
  <DialogComponents :DialogComponent="ComponDialogComponent" @click="ComponDialogComponentFn"></DialogComponents>
  <!-- 产品激活 -->
  <DialogComponentInput :DialogComponent="ActiveDialogComponent" @click="ProductActive" ref="ActiveRef">
  </DialogComponentInput>
</template>



<script>
import { defineComponent, reactive, ref, toRef, toRefs, onMounted, watch, nextTick } from "vue";
import { postData, bubbleSort, deepClone, DownloadDisplay } from "../assets/js/pubilcs.js";
import DialogComponents from "@/components/compon/DialogComponents.vue";
import DialogComponentInput from "@/components/compon/DialogComponentInput.vue";
import bus from "@/bus.js";
import { ElMessage } from 'element-plus'
import HomeContent from "./HomeContent.ts";
export default defineComponent({
  name: "ProductActivationList",
  components: {
    DialogComponents,
    DialogComponentInput
  },
  setup() {
    let myScrollbar = ref(null)
    let scrollKey = 'scrollPosition'
    //获取子组件里面的一些方法
    let ActiveRef = ref('')
    let State = reactive({
      ProductActivationListArr: [],
      tipShowBoolean: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false],
    })
    //选择产品index
    let selectindex = ref(0)
    let selectProduct = ref(0)
    //删除产品index
    let DeleteIndex = ref(0)
    //删除实训任务数据
    let DeleteDialogComponent = reactive({
      Dialogboolean: false,
      Msg: "是否删除此产品",
      Speanstyles: {

      },
      Buttonstyle: {
        background: '#BF3434'
      },
      Buttonname: "确定",
    })
    let ActiveDialogComponent = reactive({
      Dialogboolean: false,
      Msg: "激活码 : ",
      Speanstyles: {

      },
      Buttonstyle: {
        background: 'linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8)'
      },
      Buttonname: "确定",
      Tips: {
        TipsError: '',
        TipsErrorBoolean: false,
      }
    })

    //产品提示(通用对话框)
    let ComponDialogComponent = reactive({
      Dialogboolean: false,
      Msg: "",
      Speanstyles: {

      },
      Buttonstyle: {
        background: 'linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8)'
      },
      Buttonname: "确定",
    })
    //对话框计时器
    let Manytimestimes = ref('')
    //用于添加产品更新产品数据
    bus.$off('ProductActivationListArr')
    //用来更新产品数据值
    bus.$on('ProductActivationListArr', (data) => {
      State.ProductActivationListArr = data
      SelectProducItem(0)
    })
    //初始化获取数据
    async function InitDate() {
      if (sessionStorage.getItem("ProductActivationListArr")) {
        //有存储值时读取储存的值
        State.ProductActivationListArr = bubbleSort(JSON.parse(sessionStorage.getItem("ProductActivationListArr")))
        console.log(State.ProductActivationListArr, '储存读取');

        if (sessionStorage.getItem('productindex')) {
          let index = parseInt(sessionStorage.getItem("productindex"))
          selectindex.value = index

          let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: State.ProductActivationListArr[index].productId, ShortName: State.ProductActivationListArr[index].number })
          //获取激活数据
          State.ProductActivationListArr[index].Status = rep.Status
          let id = State.ProductActivationListArr[index].productId
          if (State.ProductActivationListArr[index].Status === 0) {
            //选中产品
            //储存第一个产品的产品id
            sessionStorage.setItem("productId", id)

            //HomeTaskPanel面板初始化
            bus.$emit("UpdateHomeTaskPanel", "Updates")
          } else if (State.ProductActivationListArr[index].Status === 1) {
            //选中产品
            //储存第一个产品的产品id
            sessionStorage.setItem("productId", id)
            //HomeTaskPanel面板初始化
            bus.$emit("UpdateHomeTaskPanel", "Updates")
          }
        } else {
          //选中第一个产品
          selectindex.value = 0
          let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: State.ProductActivationListArr[0].productId, ShortName: State.ProductActivationListArr[0].number })
          //获取激活数据
          State.ProductActivationListArr[0].Status = rep.Status
          if (State.ProductActivationListArr[0].Status === 1) {
            sessionStorage.setItem("productId", id)
            bus.$emit("UpdateHomeTaskPanel", "Updates")
          } else if (State.ProductActivationListArr[0].Status === 0) {
            let id = State.ProductActivationListArr[0].productId
            //储存第一个产品的产品id
            sessionStorage.setItem("productId", id)

            //HomeTaskPanel面板初始化
            bus.$emit("UpdateHomeTaskPanel", "Updates")
          }
        }
      } else {
        if (sessionStorage.getItem('productindex')) {
          let index = parseInt(sessionStorage.getItem("productindex"))
          selectindex.value = index
        } else {
          //选中第一个产品
          selectindex.value = 0
        }
        //获取平台服务器数据
        postData("/api/ProductAuthority/GetAllByUserId", JSON.stringify({ UserId: sessionStorage.getItem("userid") }), sessionStorage.getItem("token")).
          then(function (res) {
            if (res.success) {
              if (HomeContent.Default.searchVal.value == '') {
                State.ProductActivationListArr = res.result.result
                console.log(State.ProductActivationListArr, '接口获取');
                sessionStorage.setItem('shouyeDate', JSON.stringify(State.ProductActivationListArr))
                if (res.result.result.length === 0) {
                  //方便直接查找数据为空值
                  sessionStorage.setItem("productId", 99999)
                  bus.$emit("UpdateHomeTaskPanel", "Updates")
                  return
                } else {
                  //排序
                  State.ProductActivationListArr = bubbleSort(State.ProductActivationListArr)
                  //获取后端产品信息
                  // GetProductInformation()
                  SelectProducItem(selectindex.value)
                }
              } else {

              }
            }

          })
          .catch((error) => {

          });
      }
    }
    //通过后端获取产品的信息
    async function GetProductInformation() {
      let id = State.ProductActivationListArr[0].productId
      let ShortName = State.ProductActivationListArr[0].number
      let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: id, ShortName: ShortName });
      if (rep.Success) {
        State.ProductActivationListArr[0].Status = rep.Status

        if (State.ProductActivationListArr[0].Status === 1) {
          sessionStorage.setItem("productId", id)
          //HomeTaskPanel面板初始化
          bus.$emit("UpdateHomeTaskPanel", "Updates")
        } else if (State.ProductActivationListArr[0].Status === 0) {
          //获取第一个产品的产品id
          let id = State.ProductActivationListArr[0].productId
          //储存第一个产品的产品id
          sessionStorage.setItem("productId", id)
          //HomeTaskPanel面板初始化
          bus.$emit("UpdateHomeTaskPanel", "Updates")
        } else {
          sessionStorage.setItem("productId", 99999)
          //HomeTaskPanel更新
          bus.$emit("UpdateHomeTaskPanel", "Updates")
        }
      }
    }

    //选择产品
    async function SelectProducItem(imgindex) {
      // console.log('选中的产品信息', State.ProductActivationListArr[imgindex]);

      selectProduct.value = State.ProductActivationListArr[imgindex].number
      HomeContent.Default.productNumber.value = State.ProductActivationListArr[imgindex].number
      sessionStorage.setItem('producted', JSON.stringify(State.ProductActivationListArr[imgindex]))
      sessionStorage.setItem('productIdex', imgindex)
      //储存类型
      sessionStorage.setItem("ModelType", State.ProductActivationListArr[imgindex].templet)


      // console.log('shenmeshuju a : ', State.ProductActivationListArr);
      // sessionStorage.setItem('shouyeDate',JSON.stringify(State.ProductActivationListArr))
      // console.log('存储的类型：', State.ProductActivationListArr[imgindex].templet);


      //获取激活数据
      let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: State.ProductActivationListArr[imgindex].productId, ShortName: State.ProductActivationListArr[imgindex].number });
      State.ProductActivationListArr[imgindex].Status = rep.Status
      //储存选择的产品的产品类型
      if (sessionStorage.getItem("ProductInventoryArr")) {
        let ProductInventoryArr = JSON.parse(sessionStorage.getItem("ProductInventoryArr"))
        sessionStorage.setItem("productTypeId", ProductInventoryArr[imgindex].type)
      }
      selectindex.value = imgindex
      //储存选择产品的index
      sessionStorage.setItem("productindex", imgindex)
      if (State.ProductActivationListArr[imgindex].Status === 0) {
        //储存选择的产品ID
        sessionStorage.setItem("productId", State.ProductActivationListArr[imgindex].productId)
        //HomeTaskPanel更新
        bus.$emit("UpdateHomeTaskPanel", "Updates")
      } else if (State.ProductActivationListArr[imgindex].Status === 1) {
        sessionStorage.setItem("productId", State.ProductActivationListArr[imgindex].productId)
        //HomeTaskPanel更新
        bus.$emit("UpdateHomeTaskPanel", "Updates")
      } else {
        sessionStorage.setItem("productId", 99999)
        //HomeTaskPanel更新
        bus.$emit("UpdateHomeTaskPanel", "Updates")
      }
    }
    //监听产品设置时间
    function ProducOptionEventListener() {
      document.addEventListener('click', (e) => {
        let thisClassName = e.target.className
        if (thisClassName !== "item-tipshow") {
          State.tipShowBoolean = []
        }
      })
    }
    //产品设置显示
    function ProducOptionShow(e, imgindex) {
      //阻止事件冒泡
      if (e && e.stopPropagation) {
        e.stopPropagation();
      } else {
        window.event.cancelBubble = true;
      }
      if (State.tipShowBoolean[imgindex]) {
        State.tipShowBoolean[imgindex] = false
      } else {
        State.tipShowBoolean[imgindex] = true
      }
      DeleteIndex.value = imgindex
    }
    //产品置顶
    async function ProductTop(imgindex) {
      let NewProductActivationListArr = deepClone(State.ProductActivationListArr)
      let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: State.ProductActivationListArr[imgindex].productId, ShortName: State.ProductActivationListArr[imgindex].number })

      //两个数组位置互换
      let temp = NewProductActivationListArr[imgindex]
      //两个数组位置互换
      NewProductActivationListArr[imgindex] = NewProductActivationListArr[0]
      //两个数组位置互换
      NewProductActivationListArr[0] = temp
      //取消当前选中的产品
      State.tipShowBoolean[imgindex] = false
      //临时接收储存的产品id数组
      let NewTopArr = []
      for (let i = 0; i < NewProductActivationListArr.length; i++) {
        NewTopArr.push(NewProductActivationListArr[i].productId)
      }
      //将产品id组成的数组传递后端
      postData("/api/ProductAuthority/Top", JSON.stringify({ "UserId": sessionStorage.getItem("userid"), "ProductId": NewTopArr[0], "Sort": State.ProductActivationListArr[imgindex].sort }), sessionStorage.getItem("token")).
        then(function (res) {
          if (res.success) {
            //互换好的数组赋值给原数组
            State.ProductActivationListArr = res.result.result.sort(compare('sort'))
            sessionStorage.setItem("ProductActivationListArr", JSON.stringify(State.ProductActivationListArr))
            //获取激活数据
            State.ProductActivationListArr[0].Status = rep.Status
            sessionStorage.setItem("productindex", 0)
            //默认选中第一个
            selectindex.value = 0
          }
        })
        .catch((error) => {

        });
    }
    function compare(property) {
      return function (a, b) {
        let value1 = a[property];
        let value2 = b[property];
        return value1 - value2;
      }
    }
    //产品激活对话框显示
    function ProductActiveDialogShow(index) {
      console.log('==================11111111111111111111111111');
      ActiveDialogComponent.Dialogboolean = true
      selectindex.value = index
    }
    //激活产品
    async function ProductActive(fn) {
      if (fn === 'Cancel') {
        ActiveDialogComponent.Dialogboolean = false
      }
      if (fn === 'Ready') {
        //产品id
        let id = State.ProductActivationListArr[selectindex.value].productId
        //产品短id
        let ShortName = State.ProductActivationListArr[selectindex.value].number
        //激活码的值
        let KeyCode = ActiveRef.value.key
        let rep = await Application.PostMessageAsync(Opcode.ProductActivationRequest, { Id: id, KeyCode: KeyCode, ShortName: ShortName });
        if (rep.Success === true) {
          console.log(rep)
          //设置状态
          State.ProductActivationListArr[selectindex.value].Status = 0
          //临时储存
          sessionStorage.setItem("ProductActivationListArr", JSON.stringify(State.ProductActivationListArr))
          ElMessage({
            message: '激活成功',
            type: 'success',
          })
          //激活之后显示该产品的一些信息
          sessionStorage.setItem("productId", id)
          //HomeTaskPanel更新
          bus.$emit("UpdateHomeTaskPanel", "Updates")
          ActiveDialogComponent.Dialogboolean = false
        } else {
          ActiveRef.value.Tips.TipsErrorBoolean = true
          ActiveRef.value.Tips.TipsError = rep.Message
        }
      }
    }
    //产品启动
    async function ProductOpen(index) {

      let ShortName = ''
      let UserName = sessionStorage.getItem("UserName")
      let ProductType = ''
      let CarType = ""
      let SystemType = ""
      let Type = ''
      let Launcher = ''
      let Executer = ''
      //获取产品库里面的信息
      let ProductInventoryArr = JSON.parse(sessionStorage.getItem("ProductInventoryArr"))
      console.log(ProductInventoryArr, '取值');
      console.log(State.ProductActivationListArr, '取值2');
      for (let i = 0; i < ProductInventoryArr.length; i++) {
        //获取一些信息传递参数
        if (ProductInventoryArr[i].number === State.ProductActivationListArr[index].number) {
          ShortName = State.ProductActivationListArr[index].number
          ProductType = ProductInventoryArr[i].name
          CarType = ProductInventoryArr[i].vehicleModel
          SystemType = ProductInventoryArr[i].system
          Type = parseInt(ProductInventoryArr[i].type)
          Launcher = ProductInventoryArr[i].launcher
          if (ProductInventoryArr[i].executer === null) {
            Executer = ''
          } else {
            Executer = ProductInventoryArr[i].executer
          }
        }
      }
      let rep = await Application.PostMessageAsync(Opcode.SessionStorageSaveRequest, { key: "Product", Value: JSON.stringify({ ProductType: ProductType, CarType: CarType, SystemType: SystemType, ShortName: ShortName, UserName: UserName }) });
      console.log(rep, '存储回调');
      if (rep.Success) {
        console.log({ Type: Type, Id: State.ProductActivationListArr[index].productId, ShortName: ShortName, DisplayName: "", Launcher: Launcher, Executer: Executer, Framerate: 60, Key: "Product" }, '产品启动信息');
        let reps = await Application.PostMessageAsync(Opcode.ProductLaunchRequest, { Type: Type, Id: State.ProductActivationListArr[index].productId, ShortName: ShortName, DisplayName: "", Launcher: Launcher, Executer: Executer, Framerate: 60, Key: "Product" });
        if (reps.Success) {
          ComponDialogComponent.Dialogboolean = true
          ComponDialogComponent.Msg = reps.Message
          Manytimestimes.value = setInterval(function () {
            ComponDialogComponent.Dialogboolean = false
            //清空计时器
            clearInterval(Manytimestimes.value)
            Manytimestimes.value = null
          }, 5000);
        } else {
          ComponDialogComponent.Dialogboolean = true
          ComponDialogComponent.Msg = "请先关闭其他已启动软件"
        }
      }

      // 添加用户id，产品id，学校id
      postData("/api/Quant/Create", JSON.stringify({ "CreatorId": sessionStorage.getItem("userid"), "ProductId": sessionStorage.getItem('productId'), "SchoolId": sessionStorage.getItem("schoolId") }), sessionStorage.getItem("token")).
        then(function (rep) {
          if (rep) {
            console.log('SchoolAuthority接口', rep);

          } else {

          }
        }).catch(error => {
          console.log('错误', error)
        });
    }
    //产品提示对话框执行的方法
    function ComponDialogComponentFn(fn) {
      if (fn === 'Cancel') {
        ComponDialogComponent.Dialogboolean = false
      }
      if (fn === 'Ready') {
        ComponDialogComponent.Dialogboolean = false
      }
    }
    //产品删除
    function ProductDelete() {
      DeleteDialogComponent.Dialogboolean = true
    }
    //删除产品执行的操作
    function ProductDeleteFn(fn) {
      if (fn === 'Cancel') {
        DeleteDialogComponent.Dialogboolean = false
      }
      if (fn === 'Ready') {
        //更改删除产品提示信息
        DeleteDialogComponent.Msg = "删除中......"
        postData("/api/ProductAuthority/Delete", JSON.stringify({ "Id": State.ProductActivationListArr[DeleteIndex.value].id }), sessionStorage.getItem("token")).
          then(function (res) {
            if (res.success) {
              //获取产品库的信息
              let ProductInventoryArr = JSON.parse(sessionStorage.getItem("ProductInventoryArr"))
              //产品库对应的添加按钮要显示出来
              for (let i = 0; i < ProductInventoryArr.length; i++) {
                if (State.ProductActivationListArr[DeleteIndex.value].number === ProductInventoryArr[i].number) {
                  //设置添加按钮为显示
                  ProductInventoryArr[i].isAdd = false
                  //临时存储产品库信息
                  sessionStorage.setItem("ProductInventoryArr", JSON.stringify(ProductInventoryArr))
                }
              }
              //删除数组中对应的产品
              State.ProductActivationListArr.splice(DeleteIndex.value, 1)
              //设置选中最新的产品的设置为不显示
              State.tipShowBoolean[DeleteIndex.value] = false
              //sessionStorage存储所有产品信息
              if (State.ProductActivationListArr.length === 0) {
                sessionStorage.setItem("ProductActivationListArr", '')
                sessionStorage.setItem("productId", 99999)
                bus.$emit("UpdateHomeTaskPanel", "Updates")
              } else {
                sessionStorage.setItem("ProductActivationListArr", JSON.stringify(State.ProductActivationListArr))
                SelectProducItem(0)
              }
              DeleteDialogComponent.Dialogboolean = false
              DeleteDialogComponent.Msg = "是否删除此产品"
            }
          })
          .catch((error) => {

          });
      }
    }
    //监听首页搜索框的值
    watch(() => HomeContent.Default.searchVal.value, (val, old) => {
      if (val == '') {
        State.ProductActivationListArr = JSON.parse(sessionStorage.getItem('shouyeDate'))
        State.ProductActivationListArr.forEach(async element => {
          if (element.number == selectProduct.value) {
            let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: element.productId, ShortName: element.number });
            element.Status = rep.Status
          }
        });
      } else {
        State.ProductActivationListArr = HomeContent.Default.searchList.value
        State.ProductActivationListArr.forEach(async element => {
          if (element.number == selectProduct.value) {
            let rep = await Application.PostMessageAsync(Opcode.ProductActivationStatusRequest, { Id: element.productId, ShortName: element.number });
            element.Status = rep.Status
          }
        });
      }
    },
      { deep: true }
    )
    function scrollDistance() {
      const scrollTop = this.$refs.myScrollbar.scrollTop;
      sessionStorage.setItem(scrollKey, scrollTop)
    }
    onMounted(async () => {
      if (HomeContent.Default.searchList.value.length > 0 && HomeContent.Default.searchVal.value != '') {
        State.ProductActivationListArr = HomeContent.Default.searchList.value
        console.log('选择了产品', sessionStorage.getItem('productIdex'));
        if (sessionStorage.getItem('productIdex')) {
          SelectProducItem(sessionStorage.getItem('productIdex'))
        }

      } else if (HomeContent.Default.searchVal.value = '') {
        State.ProductActivationListArr = JSON.parse(sessionStorage.getItem('shouyeDate'))
        console.log('选择了产品', sessionStorage.getItem('productIdex'));
        // if (sessionStorage.getItem('productIdex')) {
        //   SelectProducItem(sessionStorage.getItem('productIdex'))
        // }
      }
      //初始化数据
      InitDate()
      //监听产品设置
      ProducOptionEventListener()
      const savedPosition = sessionStorage.getItem(scrollKey)
      // if (savedPosition && myScrollbar.value) {
      // console.log('设置初始位置????', savedPosition);
      //   myScrollbar.value.setScrollTop(Number(savedPosition))
      // }
      setTimeout(() => {
        let element = document.getElementById('box');
        element.scrollTo({
          top: sessionStorage.getItem(scrollKey),
          behavior: 'smooth'
        });
      }, 500);


    });
    return {
      State,
      selectindex,
      ActiveRef,
      SelectProducItem,
      ProducOptionEventListener,
      ProducOptionShow,
      DeleteDialogComponent,
      ComponDialogComponent,
      ComponDialogComponentFn,
      ActiveDialogComponent,
      ProductActiveDialogShow,
      ProductDelete,
      ProductDeleteFn,
      ProductTop,
      ProductOpen,
      ProductActive,
      compare,
      selectProduct,
      scrollDistance,
      myScrollbar,
      scrollKey,
    };
  },
});
</script>

<style lang="less">
.shortName {
  // width: 245px;
  // height: 20px;
  line-height: 20px;
  z-index: 2;
  // display: inline-block;
  position: absolute;
  font-size: 16px;
  top: 15px;
  left: 20px;
  text-align: start;
}

.txt {
  max-width: 245px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.isChoice {
  color: #e8e8e8;
}

.unChoice {
  color: #3389de;
}

//面板栏
.div-background-rolling {
  position: absolute;
  width: 360px;
  height: 100%;
  left: 120px;
  background: #e8e8e8;
}

.div-background-rolling .infinite-list {
  position: absolute;
  height: 88%;
  width: 94%;
  left: 20px;
  top: 100px;
  overflow-x: hidden;

}

// .div-background-rolling .el-scrollbar__wrap {
//   overflow-x: hidden;
// }

.div-background-rolling .infinite-itemitem {
  position: relative;
  width: 320px;
  height: 180px;
  margin-top: 20px;
  cursor: pointer;
}

.div-background-rolling .infinite-itemitem:nth-child(1) {
  margin-top: 0px;
}

.rolling-panel {
  position: absolute;
  width: 320px;
  height: 180px;
  border-radius: 15px;
  background: #FFFFFF;
  overflow: hidden;
}

.rolling-panel-img {
  position: absolute;
  width: 200px;
  height: 100%;
  // top: 20px;
  // left: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rolling-panel-span {
  position: absolute;
  width: 120px;
  height: 70%;
  left: 209px;
  top: 82px;
  display: flex;
  flex-direction: column;
  // justify-content: space-around;
  // justify-content: space-evenly;
}

// .rolling-panel-span>p:nth-child(1) {
//   width: 100%;
//   height: 44px;
//   font-size: 16px;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   color: #ffffff;
//   background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
//   background-clip: text;
//   -webkit-background-clip: text;
//   -webkit-text-fill-color: transparent;
// }

.rolling-panel-span>p:nth-child(1) {
  width: 100%;
  height: 30px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  text-align: center;
}

.rolling-panel-span>p:nth-child(2) {
  width: 60%;
  // height: 30px;
  // height: 22px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #ffffff;
  margin-left: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}

.rolling-panel-span-1 {
  position: absolute;
  width: 120px;
  height: 50%;
  left: 200px;
  // top: 40px;
  top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

// .rolling-panel-span-1>p:nth-child(1) {
//   width: 100%;
//   height: 44px;
//   font-size: 16px;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   color: #ffffff;
//   background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
//   background-clip: text;
//   -webkit-background-clip: text;
//   -webkit-text-fill-color: transparent;
// }

.rolling-panel-span-1>p:nth-child(1) {
  width: 100%;
  height: 30px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  text-align: center;
}

.img-background-imgs {
  max-width: 80%;
  max-height: 80%;
  margin-left: 10px;
  margin-bottom: -35px;
  // width: auto;
  // height: auto;
  // margin: auto;
}

.select-img-background-imgs {
  margin-left: -390px;
  margin-top: -73px;
  height: 100%;
}

.unselect-img-background-imgs {
  // width: 100%;
  height: 100%;
  margin-left: -300px;
}

// .img-background-imgs-filter{
//   -webkit-filter: brightness(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
//   filter: brightness(50%);
// }

.img-item-Open {
  position: absolute;
  width: 100px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);

}

.itemitem-class-span {
  position: absolute;
  // width: 100px;
  // height: 20px;
  // font-family: Adobe Heiti Std;
  // font-weight: 600;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // background: linear-gradient(-90deg, #0974D8 0%, #3D8EF1 39.990234375%, #7C7FF8 100%);
  // background-clip: text;
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
  font-size: 16px;
}

.item-active {
  position: absolute;
  display: inline-block;
  width: 70px;
  height: 24px;
  border: 1px solid #B6B8C4;
  border-radius: 12px;
  left: 6px;
  top: 6px;
  font-size: 16px;
  font-family: PingFang SC;
  color: #81859C;
  cursor: pointer;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-tip-show {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 30px;

  border-radius: 10px;
  right: 6px;
  top: 6px;
  color: #e8e8e8;
  cursor: pointer;
}

.item-tip-show img {
  width: 20px;
  height: 14px;
  max-width: 100%;
  max-height: 100%;
}

.item-tipshow {
  position: absolute;
  top: 45px;
  right: 0px;
  width: 80px;
  height: 95px;
  background-image: url("../assets/img/other/bg.png");
}

.item-top {
  position: absolute;
  width: 80%;
  height: 30px;
  left: 10px;
  top: 13px;
  color: #FFFFFF;
  background: linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8);
  font-family: Source Han Sans CN;
  font-weight: 400;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.item-delete {
  position: absolute;
  display: inline-block;
  width: 80%;
  height: 30px;
  background: red;
  left: 10px;
  top: 53px;
  color: #81859C;
  font-family: Source Han Sans CN;
  font-weight: 400;
  background: rgba(129, 133, 156, 0.1);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.div-background-rolling .el-progress {
  position: absolute;
  top: 15%;
  left: 8%;
  transform: translate(-50%, -50%);
}

.el-progress .el-progress__text {
  color: #fff;
  font-size: 10px !important;
}

.rolling-panel-bordel {
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.25);
  border-radius: 20px;
}

.rolling-panel-bordel-1 {
  background: #ffffff !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.bgc_tooltip {
  .ant-tooltip-inner {
    // 这里是框框
    border-radius: 5px;
    opacity: 0.8;
  }

  .ant-tooltip-arrow::before {
    // 这里是小三角形
    opacity: 0.8;
  }
}

.shuText {
  font-size: 13px;
  margin-left: 2px;
  margin-right: 2px;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #ffffff;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 10px;
  background: #e8e8e8;
}
</style>
